<template>
	<view class="content">
		<view class="login-container">
			<text class="login-title">登录</text>
			
			<view class="input-group">
				<text class="input-label">邮箱：</text>
				<input 
					class="input" 
					type="text" 
					v-model="formData.email" 
					placeholder="请输入邮箱地址"
					@blur="validateEmail"
				/>
				<text v-if="errors.email" class="error-message">{{ errors.email }}</text>
			</view>
			
			<view class="input-group">
				<text class="input-label">密码：</text>
				<input 
					class="input" 
					type="password" 
					v-model="formData.password" 
					placeholder="请输入密码"
					@blur="validatePassword"
				/>
				<text v-if="errors.password" class="error-message">{{ errors.password }}</text>
			</view>
			
			<button 
				class="login-btn" 
				:disabled="isSubmitting" 
				@click="handleLogin"
			>
				<text v-if="!isSubmitting">登录</text>
				<view v-else class="loading-spinner"></view>
			</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				formData: {
					email: '',
					password: ''
				},
				errors: {},
				isSubmitting: false
			}
		},
		onLoad() {
			// 页面加载时的逻辑
		},
		methods: {
			// 验证邮箱
			validateEmail() {
				const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
				if (!this.formData.email) {
					this.$set(this.errors, 'email', '请输入邮箱地址');
					return false;
				} else if (!emailPattern.test(this.formData.email)) {
					this.$set(this.errors, 'email', '请输入有效的邮箱地址');
					return false;
				} else {
					this.$delete(this.errors, 'email');
					return true;
				}
			},
			
			// 验证密码
			validatePassword() {
				if (!this.formData.password) {
					this.$set(this.errors, 'password', '请输入密码');
					return false;
				} else if (this.formData.password.length < 6) {
					this.$set(this.errors, 'password', '密码长度不能少于6位');
					return false;
				} else {
					this.$delete(this.errors, 'password');
					return true;
				}
			},
			
			// 处理登录
			handleLogin() {
				// 验证表单
				const isEmailValid = this.validateEmail();
				const isPasswordValid = this.validatePassword();
				
				if (isEmailValid && isPasswordValid) {
					this.isSubmitting = true;
					
					// 模拟登录请求
					setTimeout(() => {
						uni.showToast({
							title: '登录成功',
							icon: 'success'
						});
						
						// 登录成功后的跳转
						setTimeout(() => {
							uni.navigateTo({
								url: '/pages/expert/expert'
							});
						}, 1500);
						
						this.isSubmitting = false;
					}, 2000);
				}
			},
			
			// 登录相关方法
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 20rpx;
		min-height: 100vh;
		background-color: #fff5f8;
		box-sizing: border-box;
	}

	.login-container {
		width: 98%;
		padding: 30rpx;
		background-color: #ffffff;
		border-radius: 20rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
		/* max-width: 600rpx; */
		margin: 0 auto;
		box-sizing: border-box;
	}

	.login-title {
		font-size: 42rpx;
		font-weight: bold;
		color: #ff6b9c;
		margin-bottom: 40rpx;
		text-align: center;
	}

	.input-group {
		margin-bottom: 30rpx;
		width: 100%;
	}

	.input-label {
		font-size: 26rpx;
		color: #666;
		margin-bottom: 12rpx;
		display: block;
	}

	.input {
		height: 80rpx;
		width: 100%;
		border: 1px solid #ffcce0;
		border-radius: 8rpx;
		padding: 0 20rpx;
		font-size: 28rpx;
		background-color: #fff;
		box-sizing: border-box;
	}

	.error-message {
		color: #ff4d7f;
		font-size: 24rpx;
		margin-top: 8rpx;
	}



	.login-btn {
		height: 80rpx;
		width: 100%;
		background-color: #ff6b9c;
		color: white;
		border-radius: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		margin-top: 40rpx;
		box-shadow: 0 4rpx 12rpx rgba(255, 107, 156, 0.3);
	}

	.login-btn:active {
		background-color: #ff4785;
	}

	.loading-spinner {
		width: 40rpx;
		height: 40rpx;
		border: 4rpx solid rgba(255, 255, 255, 0.3);
		border-radius: 50%;
		border-top-color: #ffffff;
		animation: spin 1s linear infinite;
	}

	@keyframes spin {
		0% { transform: rotate(0deg); }
		100% { transform: rotate(360deg); }
	}


	/* 媒体查询，适配不同尺寸的手机屏幕 */
	@media screen and (max-width: 375px) {
		.login-container {
			width: 95%;
			padding: 25rpx;
		}
		
		.login-title {
			font-size: 38rpx;
			margin-bottom: 30rpx;
		}
		
		.input {
			height: 75rpx;
		}
		
		.login-btn {
			height: 75rpx;
		}
	}
</style>
